<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="example-my-v-model">
			
			<base-checkbox v-model="lovingVue"></base-checkbox>
		</div>	
		<!-- 
		自定义组件的v-model
		
		一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，
		但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。
		model 选项可以用来避免这样的冲突：
		 -->
		<script type="text/javascript">
			Vue.component('base-checkbox',{
				model:{
					prop:'checked',
					event:'change'
				},
				props:{
					checked:Boolean
				},
				template:`
				<input 
				type="checkbox"
				v-bind:checked="checked"
				v-on:change="$emit('change',$event.target.checked)"
				/>
				`
			})
			let app=new Vue({
				el:'#example-my-v-model',
				data:{
					lovingVue:false,
				}
			})
		</script>	
		<style type="text/css">
		</style>
	</body>
</html>
